/* page event */
;(function (window) {
    var document = window.document;
    
    var basePath = window.HOST + (document.body.clientWidth > 360 ? 'img/2x/' : 'img/');
    var div = document.createElement('div');

    var $j = function (str, context) {
        str = str.trim();
        if (str.charAt(0) == '<' && str.charAt(str.length - 1) == '>') {
            div.innerHTML = str;
            return div.firstChild;
        }
        if (typeof (context) == 'string') {
            context = $j(context);
        }
        ;
        return (context || document).querySelector(str)
    };
    var content = $j('#content');
    //修正比率
    var body = document.body;
    //if (body.clientHeight <= body.clientWidth) {
        content.style.width = body.clientHeight * 640 / 1136 + 'px'
    //}
    document.body.addEventListener('touchmove',function(e){
        e.preventDefault();
    },true)
    var startLayer = $j('.start');
    var startBtn = $j('.start-btn');
    var gameLayer = $j('.game');
    var ruleLayer = $j('.rule');
    var startBtn = $j('<img src="{basePath}startBtn.png" alt="" />'.replace('{basePath}', basePath));
    $j('.start-btn').appendChild(startBtn);
    startBtn.onclick = function (e) {
        e.preventDefault();
        startLayer.style.display = 'none';
        gameLayer.style.display = 'block';
        ruleLayer.style.display = 'block';
        window.App.init();
    };
    //startBtn.click();
    ruleLayer.onclick = function (e) {
        e.preventDefault();
        ruleLayer.style.display = 'none';
        App.bind();
    };
   // $j('.rule-close', ruleLayer).click();
    $j('.replay').onclick = function(){
        App.replay();
    }

})(window);